<template>
    <div class="outpatientDetails-view">

      <modules-title titleName="病例详情">
        <template slot="btn">
          <el-button class="main-btn" type="primary" @click="printClick">打印病例</el-button>
<!--          <el-button class="border-btn">下载病例</el-button>-->
        </template>
      </modules-title>

      <div class="scroll-view" id="scroll">

        <div class="top-infomation">
          <span class="top-item">{{datas.created_at}}</span>
          <span class="top-item">医生：{{datas.doctor_name}}</span>
          <span class="top-item">科室：{{datas.department_name}}</span>
        </div>

        <div class="patient-information">

          <div class="patient-item">
            <span>{{datas.real_name}}</span>
          </div>

          <div class="patient-item">
            <span v-if="datas.gender == 0">男</span>
            <span v-else>女</span>
          </div>

          <div class="patient-item">
            <span v-if="datas.age.split(',').length > 0">{{datas.age.split(',')[0]}}</span>
            <span v-else>0</span>
            <div class="line"></div>
            <span class="unitStr">岁</span>
            <div class="line"></div>
            <span v-if="datas.age.split(',').length > 1">{{datas.age.split(',')[1]}}</span>
            <span v-else>0</span>
            <div class="line"></div>
            <span class="unitStr">月</span>
            <div class="line"></div>
            <span v-if="datas.age.split(',').length > 2">{{datas.age.split(',')[2]}}</span>
            <span v-else>0</span>
            <div class="line"></div>
            <span class="unitStr">天</span>
          </div>

          <div class="patient-item" v-if="datas.mobile && datas.mobile != ''">
            <span >{{datas.mobile}}</span>
          </div>

          <div class="patient-item"v-if="datas.id_card && datas.id_card != ''">
            <span >{{datas.id_card}}</span>
          </div>

          <div class="patient-item" v-if="datas.address && datas.address != ''">
            <span >{{datas.address}}</span>
          </div>

        </div>

        <div class="caseContent-main">
          <div class="caseContent-title">
            <div class="title-left"><span>病历</span></div>
          </div>
          <div class="caseContent-content">
            <ul class="content-item-ul">
              <li class="content-item-container">
                <div class="title-item">
                  <span>主诉</span>
                </div>
                <div class="line"></div>
                <div class="content-item">
                  <span>{{datas.medical_describe}}</span>
                </div>
              </li>
              <li class="content-item-container">
                <div class="title-item">
                  <span>既往史</span>
                </div>
                <div class="line"></div>
                <div class="content-item">
                  <span>{{datas.past_history}}</span>
                </div>
              </li>
              <li class="content-item-container">
                <div class="title-item">
                  <span>个人史</span>
                </div>
                <div class="line"></div>
                <div class="content-item">
                  <span>{{datas.personal_history}}</span>
                </div>
              </li>
              <li class="content-item-container">
                <div class="title-item">
                  <span>过敏史</span>
                </div>
                <div class="line"></div>
                <div class="content-item">
                  <span>{{datas.allergy_history}}</span>
                </div>
              </li>
              <li class="content-item-container">
                <div class="title-item">
                  <span>体格检查</span>
                </div>
                <div class="line"></div>
                <div class="content-item">
                  <span>{{datas.medical_others}}</span>
                </div>
              </li>
              <li class="content-item-container">
                <div class="title-item">
                  <span>诊断</span>
                </div>
                <div class="line"></div>
                <div class="content-item">
                  <span>{{datas.result}}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="caseContent-main" v-if="datas.check_items.length > 0">
          <div class="caseContent-title">
            <div class="title-left"><span>检查治疗项</span></div>
          </div>
          <div class="caseContent-content">
            <div class="check-item" v-for="(check,index) in datas.check_items">
              <div class="check-item-left">
                <span>{{check.check_item_name}}</span>
<!--                <span v-if="check.check_item_status"></span>-->
              </div>
              <div class="check-item-line"></div>
              <div class="check-item-right">
                {{check.check_item_number}}次
              </div>
            </div>
          </div>
        </div>

        <div class="caseContent-main" v-if="datas.surcharge.length > 0">
          <div class="caseContent-title">
            <div class="title-left"><span>附加费用</span></div>
          </div>
          <div class="caseContent-content">
            <div class="check-item" v-for="(surcharge,index) in datas.surcharge">
              <div class="check-item-left">
                <span>{{surcharge.surcharge_name}}</span>
                <!--                <span v-if="check.check_item_status"></span>-->
              </div>
              <div class="check-item-line"></div>
              <div class="check-item-right">
                ¥{{surcharge.amount.toFixed(2)}}
              </div>
            </div>
          </div>
        </div>

        <prescription-item v-for="(a,index) in datas.prescriptions" :datas="a" :index="index" :key="a.ID"></prescription-item>

        <div class="caseContent-main">
          <div class="caseContent-content">
            <div class="enjoin-item">
              <div class="enjoin-item-left">
                医嘱事项
              </div>
              <div class="enjoin-item-line"></div>
              <div class="enjoin-item-right">
                {{datas.advice}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <print ref="print"></print>

    </div>
</template>

<script>
  import print from "../../print/print";
  import prescriptionItem from "../modules/prescriptionItem";
  import {historyListDetail} from "../../../api/outpatient";

  export default {
      name: "index",
      components:{prescriptionItem,print},
      props:{
          id:Number,
      },
      data:function () {
          return{
              datas:{
                  age:'',
                  check_items:[],
                  surcharge:[]
              },
              list:[1,2,3]
          }
      },
      watch: {
          id: {
              handler(newval, oldval) {
                  this.getData(newval);
                  let scroll = document.getElementById("scroll")
                  if (scroll){
                      scroll.scrollTop = 0;
                  }
              },
              immediate: true,
          },
      },
      mounted:function() {
          // if (this.$route.query.id){
          //     this.getData(this.$route.query.id)
          // }

      },
      methods:{
          getData:function (id) {
              historyListDetail(id).then((res)=>{
                  if (res.code == 200){
                      this.datas = res.data;
                  }
              }).catch((err)=>{

              })
          },
          printClick:function () {
              let data = {...this.datas}
              this.$refs.print.printCase(data);
          }
      }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/patient/outpatientDetails.scss";
</style>
